import { Button, Input } from 'antd';
import bridgeSide from '@assets/images/bridge-side.png';
import bridgeIcHalo from '@assets/images/bridge-ic-halo.png';
import './index.less';
function Genesis() {
    return (
        <div className="halo-genesis">
            <div className="bridge-con">
                <div className="bridge-top">
                    <div className="top-title">HALO Genesis</div>
                    <div className="top-text">
                        Participants in HALO Genesis will be the earliest HALO Finance adopters,
                        committed ETH will support the HOLP POOL as liquidity
                    </div>
                </div>
                <div className="bridge-cen">
                    <div className="cen-left">
                        <div className="cen-left-box1">Status</div>
                        <div className="cen-left-box">
                            <div className="box-title">Rate</div>
                            <div className="box-con">1 ETH : 5000 HO</div>
                        </div>
                        <div className="cen-left-box">
                            <div className="box-title">Minted</div>
                            <div className="box-con">10000000 HO</div>
                        </div>
                        <div className="cen-left-box">
                            <div className="box-title">Destroyed</div>
                            <div className="box-con">10000000 HO</div>
                        </div>
                        <div className="cen-left-box">
                            <div className="box-title">Total Account</div>
                            <div className="box-con">10000000</div>
                        </div>
                        <div className="cen-left-box">
                            <div className="box-title">HOlppool</div>
                            <div className="box-con">10000000 ETH</div>
                        </div>
                        <img className="bridge-side" src={bridgeSide}></img>
                    </div>
                    <div className="cen-right">
                        <div className="right-change">
                            <div>
                                <div className="change-title">
                                    <img className="form-box-icon" src={bridgeIcHalo}></img>HALO
                                    Network
                                </div>
                                <div className="change-bal">HRC-ETH Balance</div>
                                <div className="change-num">0.1</div>
                            </div>
                            <Button type="primary" className="btn">
                                EXCHANGE
                            </Button>
                        </div>
                        <div className="right-form">
                            <div className="form-hd">Committed HRC-ETH</div>
                            <div className="right-inp-wrap">
                                <Input className="right-inp" placeholder="0.1～10000" />
                                <div className="right-inp-ext">
                                    <div className="ext-text1">Estimated receive</div>
                                    <div className="ext-text2">0 HO</div>
                                </div>
                            </div>
                        </div>
                        <div className="right-form">
                            <div className="form-hd">Synchronize Voting Node</div>
                            <Input className="right-inp" />
                            <div className="form-text">
                                The HO obtained during HALO Genesis event will vote for this node at
                                the same time
                            </div>
                        </div>
                        <Button type="primary" className="btn-g gen-btn">
                            COMMIT TO GENESIS
                        </Button>
                        <div className="right-bt">
                            <div className="mb5">Rules of Genesis event:</div>
                            <div className="mb5">
                                - The ratio of HALO reward that defines 1ETH:10000HO
                            </div>
                            <div className="mb5">
                                - The cost of ETH will increase by 0.001 if increasing or destroying
                                1000 HO
                            </div>
                            <div className="mb20">
                                - 2000 HO will destroy automatically if without any genesis orders
                                within 60mins and will relocking
                            </div>
                            <div className="mb5">Example: </div>
                            <div className="mb5">
                                If the first 0-1000 HO requires 0.1 ETH, and 1001-2000 HO requires
                                0.101 ETH. The cost of ETH will increase by 0.001 when every 1000 HO
                                staked or destroyed. So, the cost of last 1000 HO is 10.099 ETH:
                                10000 HO
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Genesis;
